<template>
  <el-dialog title="地图" class="wpwork-dialog wpwork-dialog_center" :visible.sync="dialogVisible"
    @close="$emit('close')" :append-to-body="true" :destroy-on-close="true"
    :close-on-click-modal='false' width="80%">

    <div style="width: 100%;height:65vh">
      <div id="mapDiv" style="width: 100%;height: 100%"></div>
    </div>

    <template slot="footer">
      <div style="display:flex;flex-direction: row;justify-content: flex-end;">
        <div style="margin-right: 10px;" v-if="type!=='point'">
          <el-input readOnly style="width: 600px;" v-model="pointTxt">
            <el-button slot="append" @click="dowPolygon">重新绘制</el-button>
          </el-input>
        </div>
        <div>
          <el-button @click="$emit('close')">取 消</el-button>
          <el-button type="primary" @click="$emit('close',point)">确 定</el-button>
        </div>
      </div>

    </template>

  </el-dialog>
</template>
<script>
import maps, { pointInfo } from "./index";

export default {
  props: {
    type: {
      type: String,
      default: 'point'
    },
    initialCoordinates: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      dialogVisible: true,
      point: [],
      pointTxt: undefined,
    }
  },
  mounted() {
    this.dialogVisible = true
    this.$nextTick(() => {
      this.initMap()
      if (this.initialCoordinates) {
        this.showInitialCoordinates(this.initialCoordinates)
      }
    })
  },
  methods: {
    initMap() {
      maps.init({
        id: 'mapDiv',
        centerPoint: this.initialCoordinates ? this.initialCoordinates.length === 2 ? this.initialCoordinates : this.initialCoordinates[0] : [114.289910, 30.594480],
        zoom: 16
      })
      maps.deletePoint()
      if (this.type === 'point') {
        maps.mapClick((v) => {
          maps.deletePoint()
          let obj = { ...pointInfo }
          obj.pointType = 'point'
          obj.point = [v.lnglat.getLng(), v.lnglat.getLat()]
          this.point = obj.point
          this.pointTxt = JSON.stringify(obj.point)
          obj.txt = '坐标:' + v.lnglat.getLng() + ',' + v.lnglat.getLat()
          maps.CreatePoint.addPoint(obj)
        })
      } else {
        this.dowPolygon()
      }
    },
    dowPolygon() {
      maps.deletePoint()
      console.log("🚀 ~ :82 ~ dowPolygon ~ this.point:", this.point)
      maps.Unit.polygon((v) => {
        let arr = v.currentLnglats.map(x => {
          return [x.lng, x.lat]
        })
        this.point = arr
        console.log("🚀 ~ :87 ~ dowPolygon ~ this.point:", this.point)
        this.point.push(arr[0])
        this.pointTxt = JSON.stringify(arr)
      })
    },
    showInitialCoordinates(coordinates) {
      if (coordinates && coordinates.length === 2) {
        let obj = { ...pointInfo }
        obj.pointType = 'point'
        obj.point = [coordinates[0], coordinates[1]]
        this.point = obj.point
        this.pointTxt = JSON.stringify(obj.point)
        obj.txt = '坐标:' + obj.point[0] + ',' + obj.point[1]
        maps.CreatePoint.addPoint(obj)
      } else if (Array.isArray(coordinates)) {
        console.log("🚀 ~ :87 ~ dowPolygon ~ this.coordinates:", coordinates)
        // let arr = coordinates.map(x => [x[1], x[0]])
        let arr = coordinates
        this.point = arr
        this.pointTxt = JSON.stringify(arr)
        maps.deletePoint()
        // maps.Unit.polygon({ currentLnglats: arr })
        // arr = coordinates.map(x => [x[1], x[0]])
        // maps.Unit.drawPolygon(arr)
        // 模拟多边形绘制完成
        const simulateDrawFinish = (coordinates) => {
          // 假设绘制完成，处理逻辑
          let finalArr = coordinates.map(x => [x[1], x[0]])
          this.point = finalArr
          this.pointTxt = JSON.stringify(finalArr)

          // 手动触发绘制完成后的处理逻辑
          maps.Unit.drawPolygon(finalArr)

          // 如果有需要，在此处可以添加额外的逻辑来处理多边形完成后的操作
        }

        // 立即调用模拟绘制完成的方法
        simulateDrawFinish(arr)
      }
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog .el-dialog__body {
  padding: 10px;
}
</style>